<template>
  <div class="divWarehouse">
    <!-- 搜索 -->
    <div class="box divHead">
      <div class="serchForm">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="search"
        >
          <el-row :gutter="30">
            <el-col :span="8">
              <el-form-item
                label="承运商编号"
                prop="like_code"
              >
                <el-input
                  v-model="search.like_code"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="承运商名称"
                prop="like_name"
              >
                <el-input
                  v-model="search.like_name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="联系人"
                prop="like_personName"
              >
                <el-input
                  v-model="search.like_personName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="textRight">
        <base-button
          class="minorImportantButton btnSearch"
          @click="handleSearch"
        >搜索</base-button>
        <base-button
          class="unimportanceButton"
          @click="handleReset"
        >重置</base-button>
      </div>
    </div>
    <!-- end -->
    <div class="box divContent">
      <!-- 表格数据 -->
      <div v-if="listData.length>0">
        <el-table
          :data="listData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            type="index"
            label="序号"
            width="68"
          />
          <el-table-column
            prop="code"
            label="承运商编号"
            width="160"
          />
          <el-table-column
            prop="name"
            label="承运商名称"
            width="160"
          />
          <el-table-column
            prop="personName"
            label="联系人"
            width="160"
          />
          <el-table-column
            prop="phone"
            label="联系人电话"
            width="160"
          />
          <el-table-column
            prop="email"
            label="联系邮箱"
            width="280"
          />
          <el-table-column
            label="省/市/区"
            width="280"
            prop="location"
          />
          <el-table-column
            prop="address"
            label="详细地址"
            width="350"
          />
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="200"
          />
        </el-table>
        <!-- end -->
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无货主</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// 分页
import BasePagination from '@/components/base-pagination/index.vue'
// interface接口
import { ICarrierTableData } from '@/module-business/interface/carrier'
// api数据接口
import { getCarrierList } from '@/module-business/api/carrier'
@Component({
  name: 'forwardingList',
  components: {
    BaseButton,
    BasePagination
  }
})
export default class extends Vue {
  private listData: ICarrierTableData[] = [] // 数据列表
  private ref: any = this.$refs
  private loading = false
  private search = {
    id: '', // id
    like_code: '', // 编号
    like_name: '', // 名称
    like_personName: '', // 联系人名称
    size: 10, // 每页显示10条
    current: 1 // 当前页
  }

  created() {
    this.getList()
  }

  // 功能
  private handleSearch() {
    this.getList()
  }

  // 获取数据
  private async getList() {
    this.loading = true
    const { data } = await getCarrierList(this.search)
    if (data) {
      this.loading = false
      this.listData = data.records
    }
  }

  // ui
  // 重置
  handleReset() {
    this.ref.ruleForm.resetFields()
    this.getList()
  }

  // 当前页
  private handleCurrentChange(page: number) {
    this.search.current = page
    this.getList()
  }

  // 每页条数
  private handleSizeChange(page: number) {
    this.search.size = page
    this.search.current = 1
    this.getList()
  }
}
</script>
